<template>
	<div class="publicpageview">
		<div :class="!isSearch ? 'publicformview-new' : 'publicformview-new-gaoji'">
			<el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="140px">
				<div :class="!isSearch ? 'publicformview-new-left' : 'publicformview-new-left-gaoji'">

					<el-form-item label="区房屋管理单位：" prop="dname" label-width="140px">
						<el-select disabled clearable v-model="listQuery.dname" @change='areaChange'>
							<div v-for="(item,index) in areaList" :key="index">
								<el-option :label="item.dname" :value="item.did" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="管理部(分中心)：" prop="manageDepartment" label-width="140px">
						<el-select disabled clearable v-model="listQuery.manageDepartment" @change='HouseChange' value-key="aname">
							<div v-for="(item,index) in HouseList" :key="index">

								<el-option :label="item.aname" :value="item" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="产别：" prop="OwnWay" label-width="140px">
						<el-select clearable v-model="listQuery.OwnWay">
							<el-option label="代管产" value="代管产" key="1"></el-option>
							<el-option label="教会产" value="教会产" key="2"></el-option>
							<el-option label="直管公产" value="直管公产" key="3"></el-option>
						</el-select>
					</el-form-item>
					<!-- <el-form-item label="管理形式：" prop="manageway" label-width="150px">
						<el-select v-model="listQuery.manageway" placeholder="全部">
							<el-option label="正常" value="正常"></el-option>
							<el-option label="新纳入" value="新纳入"></el-option>
							<el-option label="托管房屋" value="托管房屋"></el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="性质：" prop="LivingWay" label-width="140px">
						<el-select clearable v-model="listQuery.LivingWay">
							<el-option label="住宅" value="住宅" key="1"></el-option>
							<el-option label="非住宅" value="非住宅" key="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="管片：" prop="groupNew" label-width="140px">
						<el-select clearable v-model="listQuery.groupNew">
							<div v-for="(item,index) in guanpianList" :key="index">
								<el-option :label="item.groupnew" :value="item.groupnew" :key="index"></el-option>
							</div>
						</el-select>
					</el-form-item>
					<el-form-item label="所号：" prop="blockNo" label-width="140px">
						<el-input v-model="listQuery.blockNo"></el-input>
					</el-form-item>
					<el-form-item label="类型： " prop="BlockMain">
						<el-select v-model="listQuery.BlockMain">
							<el-option label="主体" value="1" key="1"></el-option>
							<el-option label="附属" value="0" key="0"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="原因：" prop="cause" label-width="140px">
						<el-input v-model="listQuery.cause"></el-input>
					</el-form-item>
					<el-form-item label="日期：" prop="date">
						<el-date-picker style="width: 160px;" v-model="listQuery.date" value-format="yyyy-MM" type="month" placeholder="年/月">
						</el-date-picker>
					</el-form-item>
				</div>

			</el-form>
			<div :class="!isSearch ? 'publicformview-new-right' : 'publicformview-new-right-gaoji'">
				<el-button size="mini" type="primary" @click="cxSubmit">查询</el-button>
				<el-button size="mini" @click="resetForm">重置</el-button>
				<el-button size="mini" type="primary" @click="isSearch = !isSearch">{{!isSearch?'高级搜索':'关闭搜索'}}</el-button>
			</div>
		</div>

		<div class="publitableview">
			<el-button type="primary" size="mini" @click="handleUpdate('',1)">导出</el-button>
			<el-table max-height='500px' v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">

				<el-table-column align="center" label="所号" prop="blockNo">
				</el-table-column>

				<el-table-column align="center" label="管片" prop="groupNew">
				</el-table-column>

				<el-table-column align="center" label="性质" prop="livingWay">
				</el-table-column>

				<el-table-column align="center" label="产别" prop="ownWay">
				</el-table-column>

				<el-table-column align="center" label="使用面积" prop="totalUsingArea">
				</el-table-column>

				<el-table-column align="center" label="建筑面积" prop="totalBuildingArea">
				</el-table-column>

				<el-table-column align="center" label="状态" prop="stopCause">
				</el-table-column>

				<!--   <el-table-column align="center" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDayin(scope.row)">详情</el-button>
          </template>
        </el-table-column> -->
			</el-table>


			<div class="publicpaginationview">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" small></el-pagination>
			</div>
		</div>

		<el-dialog title="详情" :visible.sync="isXiangqing" width="70%" :before-close="handleClose"
			style="margin-top: 100px;">
			<el-table max-height='500px' v-loading="listLoading" :data="detailQuery" border fit highlight-current-row
				size="mini">

				<el-table-column align="center" label="所号" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="门号" prop="userName">
				</el-table-column>

				<el-table-column align="center" label="楼层" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="单元号" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="间号" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="启示日期" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="终止日期" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="终止原因" prop="userId">
				</el-table-column>

				<el-table-column align="center" label="使用性质" prop="userId">
				</el-table-column>
			</el-table>
			<div style="height: 40px;"></div>
		</el-dialog>
	</div>
</template>

<script>
import * as XLSX from 'xlsx'
	import {
		getArea,
		blockGroupList,
		getHouseAdmin,
		mouthAddSubtractChange
	} from '@/api/industry'
	export default {
		name: 'AccommodationManagementGonglingguanli',

		data() {
			return {
				listQuery: {
					AID: '',
					DID: '',
					OwnWay: '',
					pageNum: 1,
					pageSize: 20,
					dname: '',
					manageDepartment: '',
					date:'',
					cause:'',
					blockNo:'',
					BlockMain:'',
					groupNew:'',
					LivingWay:''
				},
				total: 0,
				options: [{
					key: '1'
				}],
				list: [],
				listLoading: false,
				formData: {
					userId: '',
					userName: '',
					phone: '',
					deptId: '',
					roleId: '',
					userStatus: '1',
					remarks: ''
				},
				type: '',
				value1: '',
				isSearch: false,
				detailQuery: [],
				isXiangqing: false,
				// 区房屋管理单位
				areaList: [],
				// 根据区获取部门
				HouseList: [],
				// 管片列表
				guanpianList: [],
				isluru: false
			}
		},

		computed: {},

		mounted() {
			if (localStorage.getItem('userHouseAdminId') > 0) {
				this.listQuery.DID = localStorage.getItem('userDID')
				this.listQuery.dname = localStorage.getItem('userDname')
				this.listQuery.manageDepartment = localStorage.getItem('userHouseAdminName')
				this.listQuery.AID = localStorage.getItem('userHouseAdminId')
				this.isluru = true
			}

			this.getArea()
			this.blockGroupList()
			this.mouthAddSubtractChange()
		},

		methods: {
			cxSubmit() {
				this.mouthAddSubtractChange()
			},
			mouthAddSubtractChange() {
				let data = this.listQuery
				mouthAddSubtractChange(data).then(res => {
					this.list = res.data.list
					this.total = res.data.total
				})
			},
			// 选择区房屋管理
			areaChange(e) {
				if (e) {
					this.listQuery.areaUnit = e
					this.getHouseAdmin(e)
				}
				this.listQuery.manageDepartment = ''
				this.listQuery.AID = ''
			},
			// 根据区获取部门
			HouseChange(e) {
				console.log(e)
				this.listQuery.manageDepartment = e.aname
				this.listQuery.AID = e.aid
			},

			getArea() {
				getArea().then((res) => {
					console.log(res)
					this.areaList = res.data
				})
			},
			getHouseAdmin(e) {
				getHouseAdmin({
					DID: e
				}).then((res) => {
					this.HouseList = res.data
				})
			},

			// 管片列表
			blockGroupList() {
				let data = {
					group: '',
					groupNumber: '',
					houseAdmin: '',
					pageNum: '',
					pageSize: 99999
				}
				this.listLoading = true
				blockGroupList(data).then((res) => {
					this.guanpianList = res.data.list
					this.listLoading = false
					// this.houseAdminList()
				})
			},
			handleSizeChange(val) {
				this.listQuery.pageNum = 1
				this.listQuery.pageSize = val
				this.mouthAddSubtractChange()
			},
			handleCurrentChange(val) {
				this.listQuery.pageNum = val
				this.mouthAddSubtractChange()
			},
			getList() {
				this.listLoading = true
				newsPage(this.listQuery).then((response) => {
					this.total = response.data.total
					this.list = response.data.list
					this.listLoading = false
				})
			},

			resetForm(val) {
				this.listQuery.OwnWay = '',
					this.listQuery.pageNum = 1,
					this.listQuery.pageSize = 20
					this.listQuery.date='',
					this.listQuery.cause='',
					this.listQuery.blockNo='',
					this.listQuery.BlockMain='',
					this.listQuery.groupNew='',
					this.listQuery.LivingWay=''
			},

			handleAddUser() {
				this.$router.push('chanquanziliaoluru')
			},
			handleUpdate(currentData, type) {
			  this.$confirm('此操作将导出该条内容，请确认是否继续操作？', '导出提示', {
			    confirmButtonText: '确定',
			    cancelButtonText: '取消',
			    type: 'warning'
			  })
			    .then(() => {
							let data = this.listQuery
							mouthAddSubtractChange(data).then(res => {
			        let list = res.data.list
			        let outList = []
			        res.data.list.forEach((item, index) => {
			          outList.push({
			            所号: item.blockNo,
			            管片: item.groupNew,
			            性质: item.livingWay,
			            产别: item.ownWay,
			            使用面积: item.totalUsingArea,
			            建筑面积: item.totalBuildingArea,
			            状态: item.stopCause
			          })
								
			        })
			        // 获取表格数据
			        const data = outList
			        // 转换数据为工作表
			        const worksheet = XLSX.utils.json_to_sheet(data)
			        // 创建新的工作簿
			        const workbook = XLSX.utils.book_new()
			        // 将工作表添加到工作簿
			        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
			        // 导出Excel文件
			        XLSX.writeFile(workbook, '房间信息.xlsx')
			      })
			    })
			    .catch(() => {
			      this.$message({
			        type: 'info',
			        message: '已取消导出'
			      })
			    })
			},
			handleDayin(row) {
				let list = []
				list.push(row)
				this.detailQuery = list
				this.isXiangqing = true
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then((_) => {
						done()
					})
					.catch((_) => {})
			}
		}
	}
</script>
<style scoped>
	.saveContent {
		width: 100%;
		display: flex;
		justify-content: end;
		margin-top: 20px;
		padding-bottom: 20px;
	}

	.title {
		color: #008c93;
		text-align: center;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.headButton {
		width: 100%;
		display: flex;
		justify-content: end;
	}

	.title2 {
		color: #008c93;
		margin-bottom: 20px;
		font-weight: bold;
	}

	.tianjiaButton {
		border: 2px solid #008c93;
		background-color: #fff;
		color: #008c93;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 150px;
	}

	/deep/.el-input__inner {
		width: 160px;
	}

	/deep/.publicpaginationview .el-input__inner {
		width: 100px;
	}

	/deep/.publicpaginationview .is-in-pagination .el-input__inner {
		width: 50px;
	}
</style>